<div class="sectionBox sectionTitle-A2"><h2>{{title}}</h2></div>
<div class="sectionScroll sectionList-A2 sectionIcon-B1 sectionFont-A1 mCustomScrollbar">
    <dl id="vue-menu">
        <dd v-for="menu in list">
            <div class="title">
                <i :class="'I1 '+menu.icon"></i><a href="javascript:void(0);">{#menu.title#}</a>
            </div>
            <div v-if="menu.ul" class="sectionList-A1 sectionList-A1-3 none">
                <ul>
                    <li v-for="v in menu.ul"><a :href="v.href">{#v.title#}</a></li>
                </ul>
            </div>

        </dd>
    </dl>
</div>

<script type="text/javascript">
    //menu
    LAM.run([LAM,jQuery],function(LAM,$) {
        'use strict';
        var System = this;

        System.setMenuSelectedStatus=function(href){
            $('.sectionList-A1-3 li a[href*="'+href+'"]')
                .closest('li').addClass('cur')
                .closest('.sectionList-A1-3').show()
                .closest('dd').addClass('hover');
        };

        $(function(){

            new Vue({
                delimiters: ['{#', '#}'],
                el: '#vue-menu',
                data: {
                    list: {{menu}}
                }
            });
            System.setMenuSelectedStatus(System.defaultRoute);
        });




    });
</script>
